<template>
  <div v-loading="loading" class="container">

    <el-form ref="form" :inline="true" label-position="left" size="mini">
      <el-form-item label="实例:">
        <el-select
          v-model="dbSelectCondition"
          style="min-width: 260px"
          clearable
          filterable
          placeholder="请选择实例"
        >
          <el-option
            v-for="item in dbSelecteds"
            :key="item.id"
            :label="item.tags + '|' + item.host"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>

    <el-row :gutter="24">
      <el-col :span="5">
        <el-card shadow="always">
          <div>
            <div class="top-card-title">CPU</div>
            <div class="top-card-detail">{{ 100-serverOsStateData.cpu_idle_time }}%</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="5">
        <el-card shadow="always">
          <div>
            <div class="top-card-title">内存</div>
            <div class="top-card-detail">{{ serverOsStateData.mem_usage_rate }}%</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="5">
        <el-card shadow="always">
          <div>
            <div class="top-card-title">IO</div>
            <div class="top-card-detail" style="line-height: 30px; font-size: 15px">reads：{{ serverOsStateData.disk_io_reads_total }}</div>
            <div class="top-card-detail" style="line-height: 30px; font-size: 15px">writes：{{ serverOsStateData.disk_io_writes_total }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="5">
        <el-card shadow="always">
          <div>
            <div class="top-card-title">网络输入</div>
            <div class="top-card-detail">{{ serverOsStateData.net_in_bytes_total }}bit/s</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="5">
        <el-card shadow="always">
          <div>
            <div class="top-card-title">网络输出</div>
            <div class="top-card-detail">{{ serverOsStateData.net_out_bytes_total }}bit/s</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <div
      style="display: flex; flex-direction: row; width: 100%; height: 420px; margin-top: 20px"
    >
      <el-card
        shadow="always"
        style="margin-top: 20px; width: 50%; margin-right: 25px"
      >
        <div class="card-header-title">优化建议</div>
        <el-divider />
        <div style="overflow: auto; height: 320px;">
          <div class="suggestSetp">
            <div class="suggestSetpTitle" style="margin-top: 0">
              参数优化
            </div>
            <div class="suggestSetpContent">
              <span style="line-height: 25px">
                1、innodb_read_io_threads可修改为1
              </span>
              <span style="line-height: 25px">
                2、innodb_write_io_threads可修改为20
              </span>
              <span style="line-height: 25px">
                3、innodb_buffer_pool_pages_total可修改为1000
              </span>
              <span style="line-height: 25px">
                4、innodb_page_size可修改为3213412412
              </span>
            </div>
          </div>
          <div class="suggestSetp">
            <div class="suggestSetpTitle">
              数据分片
            </div>
            <div class="suggestSetpContent">
              <span style="line-height: 25px;">
                1、user表数量超过1000万且查询较为频繁，建议分表
              </span>
              <span style="line-height: 25px">
                2、message表数量超过1000万且查询较为频繁，建议按照时间维度分表
              </span>
            </div>

          </div>
          <div class="suggestSetp" style="margin-bottom: 30px">
            <div class="suggestSetpTitle">
              查询优化
            </div>
            <div class="suggestSetpContent">
              <span style="line-height: 25px">
                1、user表建议添加mobile索引
              </span>
              <span style="line-height: 25px">
                2、order表建议添加user_id索引
              </span>
            </div>
          </div>

        </div>
      </el-card>

      <el-card shadow="always" style="margin-top: 20px; width: 50%">
        <div class="card-header-title" style="display: flex; flex-direction: row; justify-content: space-between; align-items: center">
          健康趋势
          <div style="font-size: 10px; color: #1890FF;" @click="gotoMonitoringServer">查看更多></div>
        </div>
        <el-divider />
        <div style="display: flex; flex-direction: row; height: 130px; justify-content: flex-start;">
          <div style="display: flex; flex-direction: column; width: 45%">
            <div style="font-size: 10px; color: #666666; margin-bottom: 10px">CPU使用率(%)</div>
            <div id="cpuChart" class="healthChart" />
          </div>
          <div style="display: flex; flex-direction: column; width: 45%; margin-left: 5%">
            <div style="font-size: 10px; color: #666666; margin-bottom: 10px">内存使用率(%)</div>
            <div id="memoryChart" class="healthChart" />
          </div>
        </div>
        <div style="margin-top: 20px">
          <div style="font-size: 10px; color: #666666">系统健康趋势</div>
          <div id="healthChart" class="healthChart" />
        </div>
      </el-card>
    </div>

    <div
      style="display: flex; flex-direction: row; width: 100%; height: 300px; margin-top: 20px"
    >
      <el-card shadow="always" style="width: 33.33%; margin-right: 25px">
        <div class="card-header-title">查询统计</div>
        <el-divider />
        <div id="sqlQueryChart" class="sqlQueryChart" />
      </el-card>

      <el-card shadow="always" style="width: 33.33%; margin-right: 25px">
        <div class="card-header-title">慢查询监控</div>
        <el-divider />
        <div id="sqlSlowQueryChart" class="sqlSlowQueryChart" />
      </el-card>

      <el-card shadow="always" style="width: 33.33%;">
        <div class="card-header-title">告警情况</div>
        <el-divider />
        <div class="report-list-container">
          <el-table
            :data="alarmHistoaryRecentlyData"
            style="width: 100%"
          >
            <el-table-column
              prop="level"
              label="等级"
              sortable
              min-width="60"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.level === 'critical'" style="width: 40px; line-height: 20px; background: red; text-align: center; font-size: 10px">
                  致命</div>
                <div v-if="scope.row.level === 'warning'" style="width: 40px; line-height: 20px; background: yellow; text-align: center; font-size: 10px">提示</div>
                <div
                  v-if="scope.row.level === 'ok'"
                  style="width: 40px; line-height: 20px; background: greenyellow; text-align: center;
                                font-size: 10px"
                >正常</div>
              </template>

            </el-table-column>
            <el-table-column
              prop="create_time"
              label="发生时间"
              sortable
              min-width="80"
            />
            <el-table-column
              prop="alarm_item"
              label="诊断项"
              min-width="120"
            />
            <el-table-column
              prop="alarm_value"
              label="诊断值"
              min-width="120"
            />

          </el-table>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import moment from 'moment'
import { alarmHistoaryRecently, mysqlServersSimpleInfo, mysqlSlowSqlsInTimeQuantumRecently, mysqlStatus, serverOsState, serverOsStateHistory } from '../../api/api'

export default {
  filters: {
    percentageFilter: function(value) {
      if (!value) {
        return ''
      }
      return Math.round(value * 100) / 100.0 + '%'
    }
  },
  data() {
    return {
      dbSelecteds: [],
      dbSelectCondition: 1,
      timer: undefined,
      changeCount: 0,
      changeRandom: 5,
      loading: false,
      serverOsStateData: {},
      reportedList: [
        { level: 3, start_time: '17:52:57', category: 'CPU利用率', time: '30分钟24秒' },
        { level: 2, start_time: '16:48:57', category: '慢SQL', time: '10秒' },
        { level: 2, start_time: '16:38:56', category: '慢SQL', time: '10秒' },
        { level: 2, start_time: '16:28:58', category: '慢SQL', time: '10秒' },
        { level: 2, start_time: '16:18:56', category: '慢SQL', time: '10秒' },
        { level: 2, start_time: '16:08:57', category: '慢SQL', time: '10秒' },
        { level: 2, start_time: '15:58:56', category: '慢SQL', time: '10秒' },
        { level: 2, start_time: '15:48:56', category: '慢SQL', time: '10秒' }
      ],
      alarmHistoaryRecentlyData: [],
      dateSelectCondition: '',
      healthChart: undefined,
      healthChartOption: {
        title: { show: false },
        grid: {
          left: 0,
          top: 10,
          bottom: 0,
          right: 0
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          nameTextStyle: {
            color: '#666666'
          },
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              width: 0.5,
              color: '#999999',
              shadowColor: '#fff',
              shadowBlur: 10
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            // 坐标轴小标记
            show: false
          },
          data: []
        },
        yAxis: {
          type: 'value',
          offset: 0,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            areaStyle: {
              color: '#975FE4'
            },
            lineStyle: {
              color: '#975FE4'
            },
            name: '',
            data: [],
            type: 'line',
            smooth: true,
            showSymbol: false,
            hoverAnimation: true
          }
        ]
      },
      cpuChart: undefined,
      cpuChartOption: {
        title: { show: false },
        grid: {
          left: 25,
          top: 10,
          bottom: 20,
          right: 10
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '{b}<br/>CPU使用率 : {c}%'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          nameTextStyle: {
            color: '#666666'
          },
          axisLabel: {
            show: true,
            showMinLabel: true,
            fontSize: 10
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 0.5,
              color: '#999999',
              shadowColor: '#fff',
              shadowBlur: 10
            }
          },
          axisTick: {
            show: true,
            inside: true,
            length: 5,
            lineStyle: {
              width: 0.5,
              color: '#999999',
              shadowColor: '#fff',
              shadowBlur: 10
            }
          },
          data: []
        },
        yAxis: {
          type: 'value',
          offset: 0,
          axisLabel: {
            show: true,
            showMinLabel: true,
            fontSize: 10
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#e5e5e5',
              type: 'dotted'
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            lineStyle: {
              color: '#975FE4'
            },
            name: '',
            data: [],
            type: 'line',
            smooth: true,
            showSymbol: false,
            hoverAnimation: true
          }
        ]
      },
      memoryChart: undefined,
      memoryChartOption: {
        title: { show: false },
        grid: {
          left: 25,
          top: 10,
          bottom: 20,
          right: 10
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '{b}<br/>CPU使用率 : {c}%'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          nameTextStyle: {
            color: '#666666'
          },
          axisLabel: {
            show: true,
            showMinLabel: true,
            fontSize: 10
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 0.5,
              color: '#999999',
              shadowColor: '#fff',
              shadowBlur: 10
            }
          },
          axisTick: {
            show: true,
            inside: true,
            length: 5,
            lineStyle: {
              width: 0.5,
              color: '#999999',
              shadowColor: '#fff',
              shadowBlur: 10
            }
          },
          data: []
        },
        yAxis: {
          type: 'value',
          offset: 0,
          axisLabel: {
            show: true,
            showMinLabel: true,
            fontSize: 10
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#e5e5e5',
              type: 'dotted'
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            lineStyle: {
              color: '#975FE4'
            },
            name: '',
            data: [],
            type: 'line',
            smooth: true,
            showSymbol: false,
            hoverAnimation: true
          }
        ]
      },
      sqlQueryChart: undefined,
      sqlQueryChartOption: {
        title: { show: false },
        grid: {
          left: 40,
          top: 10,
          bottom: 50,
          right: 20
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        color: ['#1890FF', '#00FFFF', '#FFFF00', '#975FE4', '#F2637B', '#ADFF2F'],
        legend: {
          data: ['总请求数', 'Select', 'Replace', 'Insert', 'Delete', 'Update'],
          bottom: 0,
          icon: 'pin',
          padding: 2,
          itemWidth: 10,
          itemHeight: 2,
          itemGap: 5,
          align: 'left',
          textStyle: {
            fontSize: 10
          }
        },
        xAxis: {
          splitArea: {
            show: true,
            interval: 0,
            areaStyle: {
              color: ['rgba(0, 0, 0, 0)']
            }
          },
          type: 'category',
          boundaryGap: false,
          nameTextStyle: {
            color: '#666666'
          },
          axisLabel: {
            show: true,
            showMinLabel: true,
            fontSize: 10
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 0.5,
              color: '#999999',
              shadowColor: '#fff',
              shadowBlur: 10
            }
          },
          axisTick: {
            show: true,
            inside: true,
            length: 5,
            lineStyle: {
              width: 0.5,
              color: '#999999',
              shadowColor: '#fff',
              shadowBlur: 10
            }
          },
          data: []
        },
        yAxis: {
          type: 'value',
          offset: 0,
          nameTextStyle: {
            color: '#666666'
          },
          axisLabel: {
            show: true,
            showMinLabel: true,
            fontSize: 10
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#e5e5e5',
              type: 'dotted'
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: '总请求数',
            data: [],
            type: 'line',
            smooth: true,
            showSymbol: false,
            hoverAnimation: true
          },
          {
            name: 'Select',
            data: [],
            type: 'line',
            smooth: true,
            showSymbol: false,
            hoverAnimation: true
          },
          {
            name: 'Replace',
            data: [],
            type: 'line',
            smooth: true,
            showSymbol: false,
            hoverAnimation: true,
            areaStyle: { type: 'default' }
          },
          {
            name: 'Insert',
            data: [],
            type: 'line',
            smooth: true,
            showSymbol: false,
            hoverAnimation: true,
            areaStyle: { type: 'default' }
          },
          {
            name: 'Delete',
            data: [],
            type: 'line',
            smooth: true,
            showSymbol: false,
            hoverAnimation: true,
            areaStyle: { type: 'default' }
          },
          {
            name: 'Update',
            data: [],
            type: 'line',
            smooth: true,
            showSymbol: false,
            hoverAnimation: true,
            areaStyle: { type: 'default' }
          }
        ]
      },
      sqlSlowQueryChart: undefined,
      sqlSlowQueryChartOption: {
        title: { show: false },
        grid: {
          left: 40,
          top: 10,
          bottom: 50,
          right: 30
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        color: ['#1890FF', '#00FFFF'],
        legend: {
          data: ['慢查询数'],
          bottom: 0,
          icon: 'roundRect',
          align: 'left',
          textStyle: {
            fontSize: 10
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          nameTextStyle: {
            color: '#666666'
          },
          axisLabel: {
            show: true,
            showMinLabel: true,
            fontSize: 10
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 0.5,
              color: '#999999',
              shadowColor: '#fff',
              shadowBlur: 10
            }
          },
          axisTick: {
            show: true,
            inside: true,
            length: 5,
            lineStyle: {
              width: 0.5,
              color: '#999999',
              shadowColor: '#fff',
              shadowBlur: 10
            }
          },
          data: []
        },
        yAxis: {
          type: 'value',
          offset: 0,
          nameTextStyle: {
            color: '#666666'
          },
          axisLabel: {
            show: true,
            showMinLabel: true,
            fontSize: 10
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#e5e5e5',
              type: 'dotted'
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: '慢查询数',
            data: [],
            type: 'bar',
            smooth: true,
            showSymbol: false,
            hoverAnimation: true
          },
          {
            name: 'CPU',
            data: [],
            type: 'line',
            smooth: true,
            showSymbol: false,
            hoverAnimation: true
          }
        ]
      }
    }
  },
  mounted() {
    this.getMysqlServersSimpleInfo()
    this.alarmHistoaryRecently()
    const that = this
    this.drawLine()

    this.getserverOsState()
    this.mysqlStatus()
    this.getMysqlSlowSqlsInTimeQuantum()
    that.getserverOsStateHistory()

    this.timer = setInterval(function() {
      setTimeout(function() {
        that.getserverOsState()
        that.mysqlStatus()
        that.getMysqlSlowSqlsInTimeQuantum()
        that.getserverOsStateHistory()
      }, 0)
    }, 60000)

    // 健康趋势
    for (let i = 0; i < 20; i++) {
      this.healthChartOption.series[0].data.push(Math.random() * 100)
      this.healthChartOption.xAxis.data.push(i)
    }

    this.healthChart.setOption(this.healthChartOption)

    window.onresize = function() {
      that.healthChart.resize()
      that.cpuChart.resize()
      that.memoryChart.resize()
      that.sqlQueryChart.resize()
      that.sqlSlowQueryChart.resize()
    }
  },
  destroyed() {
    window.onresize = null
    clearInterval(this.timer)
  },

  methods: {
    alarmHistoaryRecently() {
      alarmHistoaryRecently({ limit: 20 }).then((res) => {
        this.alarmHistoaryRecentlyData = res.data
      }).catch(() => {
      })
    },
    getMysqlServersSimpleInfo() {
      mysqlServersSimpleInfo({}).then((res) => {
        this.dbSelecteds = res.data
      }).catch(() => {
      })
    },
    getMysqlSlowSqlsInTimeQuantum() {
      mysqlSlowSqlsInTimeQuantumRecently({ server_id: 1, limit: 30 }).then((res) => {
        this.loading = false
        const sqlTimeQuantumList = res.data

        // 实时SQL
        this.sqlSlowQueryChartOption.xAxis.data = []
        this.sqlSlowQueryChartOption.series[0].data = []
        for (let i = 0; i < sqlTimeQuantumList.length; i++) {
          this.sqlSlowQueryChartOption.xAxis.data.push(moment(sqlTimeQuantumList[i]['time']).format('HH:mm:ss'))
          this.sqlSlowQueryChartOption.series[0].data.push(sqlTimeQuantumList[i]['count'])
        }
        this.sqlSlowQueryChart.setOption(this.sqlSlowQueryChartOption)
      }).catch(() => {
        this.loading = false
      })
    },
    mysqlStatus() {
      const that = this
      mysqlStatus({ server_id: 1 }).then((res) => {
        this.loading = false
        const serverStatusData = res.data

        console.log('serverStatusData:', serverStatusData)

        // 实时SQL

        that.sqlQueryChartOption.xAxis.data = []
        that.sqlQueryChartOption.series[0].data = []
        that.sqlQueryChartOption.series[1].data = []
        that.sqlQueryChartOption.series[2].data = []
        that.sqlQueryChartOption.series[3].data = []
        that.sqlQueryChartOption.series[4].data = []
        that.sqlQueryChartOption.series[5].data = []
        that.sqlQueryChartOption.xAxis.splitArea.areaStyle.color = []
        for (let i = 0; i < serverStatusData.length; i++) {
          const serverStatus = serverStatusData[i]

          that.sqlQueryChartOption.xAxis.data.push(moment(serverStatus.create_time).format('HH:mm:ss'))

          that.sqlQueryChartOption.series[1].data.push(serverStatus.com_select_persecond)
          that.sqlQueryChartOption.series[2].data.push(serverStatus.com_replace_persecond)
          that.sqlQueryChartOption.series[3].data.push(serverStatus.com_insert_persecond)
          that.sqlQueryChartOption.series[4].data.push(serverStatus.com_delete_persecond)
          that.sqlQueryChartOption.series[5].data.push(serverStatus.com_update_persecond)

          that.sqlQueryChartOption.series[0].data.push(
            that.sqlQueryChartOption.series[1].data[i] +
              that.sqlQueryChartOption.series[2].data[i] +
              that.sqlQueryChartOption.series[3].data[i] +
              that.sqlQueryChartOption.series[4].data[i] +
              that.sqlQueryChartOption.series[5].data[i]
          )

          if (i <= 40) {
            that.sqlQueryChartOption.xAxis.splitArea.areaStyle.color.push('rgba(0, 0, 0, 0)')
          } else {
            that.sqlQueryChartOption.xAxis.splitArea.areaStyle.color.push('rgba(90, 90, 90, 0.5)')
          }
        }

        console.log(that.sqlQueryChartOption.xAxis.splitArea.areaStyle.color)

        that.sqlQueryChart.setOption(that.sqlQueryChartOption)
      }).catch(() => {
        this.loading = false
      })
    },
    getserverOsState() {
      serverOsState({ server_id: 1 }).then((res) => {
        this.loading = false
        this.serverOsStateData = res.data
      }).catch(() => {
        this.loading = false
      })
    },
    getserverOsStateHistory() {
      serverOsStateHistory({ host: '8.131.229.55' }).then((res) => {
        this.loading = false
        this.updateCharts(res.data)
      }).catch(() => {
        this.loading = false
      })
    },
    updateCharts(serverOsStatesArray) {
      // 健康趋势
      this.cpuChartOption.series[0].data = []
      this.cpuChartOption.xAxis.data = []

      this.memoryChartOption.series[0].data = []
      this.memoryChartOption.xAxis.data = []

      for (let i = 0; i < serverOsStatesArray.length; i++) {
        const state = serverOsStatesArray[i]

        this.cpuChartOption.series[0].data.push(100.00 - state['cpu_idle_time'])
        this.cpuChartOption.xAxis.data.push(moment(state['create_time']).format('HH:mm:ss'))

        this.memoryChartOption.series[0].data.push(state['mem_usage_rate'])
        this.memoryChartOption.xAxis.data.push(moment(state['create_time']).format('HH:mm:ss'))
      }

      this.cpuChart.setOption(this.cpuChartOption)
      this.memoryChart.setOption(this.memoryChartOption)
    },
    gotoMonitoringServer() {
      this.$router.push({
        path: '/monitoring_server'
      })
    },
    drawLine() {
      this.healthChart = echarts.init(document.getElementById('healthChart'))
      this.healthChart.setOption(this.healthChartOption)

      this.cpuChart = echarts.init(document.getElementById('cpuChart'))
      this.cpuChart.setOption(this.cpuChartOption)

      this.memoryChart = echarts.init(document.getElementById('memoryChart'))
      this.memoryChart.setOption(this.memoryChartOption)

      this.sqlQueryChart = echarts.init(
        document.getElementById('sqlQueryChart')
      )
      this.sqlQueryChart.setOption(this.sqlQueryChartOption)

      this.sqlSlowQueryChart = echarts.init(
        document.getElementById('sqlSlowQueryChart')
      )
      this.sqlSlowQueryChart.setOption(this.sqlSlowQueryChartOption)
    }
  }
}
</script>

<style lang="scss" scoped>
    .container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .top-card-title {
        color: rgba(0, 0, 0, 0.45);
        font-size: 14px;
        line-height: 22px;
    }

    .top-card-detail {
        color: rgba(0, 0, 0, 0.85);
        font-weight: bolder;
        white-space: nowrap;
        word-break: break-all;
        font-size: 30px;
        line-height: 60px;
    }

    .card-header-title {
        color: rgba(0, 0, 0, 0.85);
        font-weight: 500;
        white-space: nowrap;
        word-break: break-all;
        font-size: 18px;
    }

    .el-divider--horizontal {
        margin: 20px 0;
    }

    .el-col-5 {
        width: 20%;
    }

    .healthChart {
        width: 100%;
        height: 130px;
    }

    .sqlQueryChart {
        width: 100%;
        height: 200px;
    }

    .sqlSlowQueryChart {
        width: 100%;
        height: 200px;
    }

    .report-list-container {
        height: 190px;
        width: 100%;
        overflow: auto;
    }

    .report-list-item {
        width: 100%;
        height: 40px;
        line-height: 40px;
        display: flex;
        color: rgba(0, 0, 0, 0.65);
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }

    .suggestSetp {
        padding: 0px;
    }

    .suggestSetpTitle {
        font-size: 14px;
        color: #333333;
        font-weight: bold;
        margin-top: 20px;
        margin-bottom: 5px;
    }

    .suggestSetpContent {
        display: flex;
        flex-direction: column;
        width: 90%;
        background: #f5f5f5;
        border-radius: 4px;
        white-space: pre-wrap;
        padding: 0 10px;
        color: #000000;
        font-size: 1em;
        position: relative;
        text-align: left;
    }

</style>
